{% extends "base.html" %}
{% load staticfiles %}

{% block title %}{% endblock %}

{% block meta %}
<meta name="description" content="reSRC, the root of actual learning" />
{% endblock %}

{% block extrahead %}
<link rel="stylesheet" type="text/css" href="{% static "js-custom-themes/selectize/css/selectize.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "bower_components/nprogress/nprogress.css" %}" />
<link rel="stylesheet" type="text/css" href="{% static "js-custom-themes/selectize/css/selectize.resrc.css" %}" />
{% endblock %}

{% block breadcrumb_container %} {% endblock %}

{# Content #}

{% block content %}
{% if not user.is_authenticated %}
<div class="row panel welcome">
  <a class="close-reveal-modal" id="close">&#215;</a>
  <div class="large-12 columns">
    <h2>Help us find and tag all free programming learning resources</h2>
    <p>Sign in and give some of your free time to classify and regroup all the best learning resources.</p>
    <p>Come back anytime to visit your reading list, to find the resource you need by browsing the tags, to browse or create great lists of learning resources.</p>
    <p>Keep on reading and learning. Don't forget to upvote and comment. And of course share the love, share the resources.</p>
    <p><a href="{% url "page-about" %}">read more</a></p>
  </div>
</div>
{% endif %}
<div class="row">
  <div class="large-12 columns">
    <h1 id="query">Search by tags</h1>
  </div>
</div>

<div class="row">
  <div class="medium-2 columns">
    <div class="switch">
      <input name="op" id="op-or" value="or" type="radio" checked>
      <label for="x" onclick="">Or</label>

      <input name="op" id="op-and" value="and" type="radio">
      <label for="x1" onclick="">And</label>

      <span></span>
    </div>
  </div>
  <div class="medium-10 columns">
    <input type="text" id="selected-tags" value="" placeholder="Start entering tags" />
  </div>
</div>

<div class="row" id="results">
  <div class="large-6 columns">
    <h3>Links</h3>
    <div id="link_results"></div>
  </div>
  <div class="large-6 columns">
    <h3>Lists</h3>
    <div id="list_results"></div>
  </div>
</div>


<div class="row">
  <div class="medium-6 large-3 columns">
    <h3><a href="{% url "lists" %}">Best Lists</a></h3>
    <ul class="no-bullet">
      {% for list in hottest_lists %}
      <li><span class="votes y-bg" data-id="{{list.alist__pk}}" data-type="list" data-tooltip title="Click to upvote"><span class="votes-count"> {{ list.count }} </span><i class="fi-check{% if list.alist__pk in upvoted_lists %}box{% endif %}"></i></span><a href="{% url "list-single-slug" list.alist__pk list.alist__slug %}">{{ list.alist__title }}</a></li>
      <hr>
      {% endfor %}
    </ul>
  </div>

  <div class="medium-6 large-3 columns">
    <h3><a href="{% url "links" %}">Latest Links</a></h3>
    <ul class="no-bullet">
      {% for link in latest_links %}
      <li><i class="fi-link"></i><span class="votes y-bg" data-type="link" data-id="{{link.link__pk}}" data-tooltip title="Click to upvote"><span class="votes-count"> {{ link.count }} </span><i class="fi-check{% if link.link__pk in upvoted_links %}box{% endif %}"></i></span><a href="{% url "link-single-slug" link.link__pk link.link__slug %}">{{ link.link__title }}</a>
      </li>
      <hr>
      {% endfor %}
    </ul>
  </div>

  <div class="medium-6 large-3 columns">
    <h3><a href="{% url "tag-index" %}">Most Used Tags</a></h3>
    <div>
      {% for tag in tags %}{% if tag.slug %}
      <p class="tag left"><a href="{% url "tag-single-slug" tag.slug %}"><span class="c">{{ tag.c }}</span><span class="t">{{ tag.name }}</span></a></p>
      {% endif %}{% endfor %}
    </div>
    <div style="clear:both">
      <a href="{% url "tag-index" %}">» see all</a>
    </div>
  </div>

  <div class="medium-6 large-3 columns">
    <h3><a href="{% url "links" %}">Hottest Links</a></h3>
    <ul class="no-bullet">
      {% for link in hottest_links %}
      <li><i class="fi-link"></i><span class="votes y-bg" data-type="link" data-id="{{link.link__pk}}" data-type="link" data-tooltip title="Click to upvote"><span class="votes-count"> {{ link.count }} </span><i class="fi-check{% if link.link__pk in upvoted_links %}box{% endif %}"></i></span><a href="{% url "link-single-slug" link.link__pk link.link__slug %}">{{ link.link__title }}</a>
      </li>
      <hr>
      {% endfor %}
    </ul>
  </div>
</div>

<div class="row">
  <div class="large-12 columns panel">
    <h6>Legend</h6>
    <ul class="no-bullet inline-list">
      <li><a href="#"><span class="votes y-bg" data-tooltip title="Click to upvote">74 <i class="fi-check"></i></span>I'm a list with 74 votes</a></li>
      <li class="tag"><a href="#"><span class="c">8</span><span class="t">I'm a tag with 8 links</span></a></li>
      <li><a href="#"><i class="fi-link" style="color:black"></i><span class="votes y-bg" data-tooltip title="Click to upvote">17 <i class="fi-check"></i></span>I'm a link with 17 votes</a></li>
    </ul>
  </div>
</div>

{% endblock %}

{% block last_body %}
{% if user.is_authenticated %}
<script>
  window.csrfToken = '{{ csrf_token }}';
</script>
<script src="{% static "js/votes.js" %}"></script>
{% else %}
<div id="login-modal" class="reveal-modal" data-reveal></div>
<script>
var _gaq = _gaq || [];
$(function () {
  $(document).foundation();
  $('#vote, .votes').click(function() {
    $('#login-modal').foundation('reveal', 'open', {
      url: "{% url "user-login-modal" %}"
    });
  });
  $('#close').click(function() {
    document.cookie = "hide=True";
    _gaq.push(['_trackEvent', 'Intervention', 'Hide panel', 'Hide']);
    $('.welcome').remove();
  });

  $('.votes').hover(function() {
    var $icon = $(this).find('i').eq(0);
    var $count = $(this).find('span.votes-count').eq(0);
    if($icon.hasClass('fi-check')) {
      $count.html(parseInt($count.html(), 10)+1+' ');
    } else {
      $count.html(parseInt($count.html(), 10)-1+' ');
    }
    $icon.toggleClass('fi-checkbox');
    $icon.toggleClass('fi-check');
  }, function() {
    var $icon = $(this).find('i').eq(0);
    var $count = $(this).find('span.votes-count').eq(0);
    if($icon.hasClass('fi-check')) {
      $count.html(parseInt($count.html(), 10)+1+' ');
    } else {
      $count.html(parseInt($count.html(), 10)-1+' ');
    }
    $icon.toggleClass('fi-checkbox');
    $icon.toggleClass('fi-check');
  });
});

var x = document.cookie;
var hideDiv = x.split(";");
for(i = 0; i < hideDiv.length; i++)
if(hideDiv[i] == " hide=True") {
  _gaq.push(['_trackEvent', 'Intervention', 'Hide panel', 'Already hidden']);
  $('.welcome').remove();
}
</script>
{% endif %}
<script>
  window._gaq_page_name = 'Homepage';
  window.tags = {{ tags_json|safe }};
</script>
<script src="{% static "bower_components/selectize/dist/js/standalone/selectize.min.js" %}"></script>
<script src="{% static "bower_components/nprogress/nprogress.js" %}"></script>
<script src="{% static "js/search.js" %}"></script>
{% endblock %}
